import React from 'react'
import MinusIconActive from "../../../../../../../../res/images/web/shared/btn／minus_selected@2x.png";
import MinusIcon from "../../../../../../../../res/images/web/shared/btn／minus@2x.png";
import PlusIcon from "../../../../../../../../res/images/web/shared/btn／add@2x.png";

const CountDisplay = props => {
    const iconStyle = {
        width: 24,
        height: 24,
    }
    const total = props.total
    const changeTotal = props.changeTotal
    return <div className='flex-space-between-align-center'>
        <img style={iconStyle} src={total > 0 ? MinusIconActive : MinusIcon} alt='' onClick={() => changeTotal(-1)}/>
        <p className='gift-popup-total' style={{width: props.countWidth ? props.countWidth : ''}}>{total}</p>
        <img style={iconStyle} src={PlusIcon} alt='' onClick={() => changeTotal(1)}/>
    </div>
}

export default CountDisplay